<!-- 预报预测 -->
<template>
    <div class="forecast-predict">
        <div class="map-box">
            <map-2d
                :mapId="mapConfig.mapId"
                :center="mapConfig.center"
                :zoom="mapConfig.zoom"
                :basemaps="mapConfig.basemaps"
                @MapLoadSuccess="handelMapLoadSuccess"
            />
        </div>
        <div class="left-container" v-if="mapLoadSuccess">
            <div class="card-container animate__animated animate__backInLeft">
                <div class="card-title">区域总览</div>
                <div class="card-content">
                    <template v-if="mapAreaDataList && mapAreaDataList.length > 0">
                        <div
                            class="card-item"
                            v-for="(item, index) in mapAreaDataList"
                            :key="index"
                            @click="handelDataClickItem(item)"
                            :class="activeMapArea.id === item.id ? 'active' : ''"
                        >
                            <el-icon><Menu /></el-icon>
                            <div class="name">
                                {{ item.name }}
                            </div>
                        </div>
                    </template>
                    <div class="no-data" v-else>暂无数据</div>
                </div>
            </div>
        </div>
        <div class="option-container">
            <div class="option-button" @click="handelStartDrawChild()" :class="isAddDraw ? 'active' : ''">
                <span class="icon">
                    <img src="./images/icon-add-draw.png" alt="" />
                </span>
                <span class="label"> 区域绘制 </span>
                <transition
                    enter-active-class="animate__animated animate__backInRight"
                    leave-active-class="animate__animated animate__backOutRight"
                >
                    <div class="option-group" v-if="isAddDraw">
                        <div
                            class="option-item"
                            v-for="(item, index) in optionList"
                            :key="index"
                            @click.stop="startChildDataDraw(item)"
                            :class="item.active ? 'active' : ''"
                        >
                            {{ item.name }}
                        </div>
                        <div class="option-item" @click.stop="removeChildDatDraw">移除</div>
                        <div class="option-item" @click.stop="coformChildDatDraw">确认</div>
                    </div>
                </transition>
            </div>
            <div class="option-button" @click="handelSelectGreenSpaceAnalysis()">
                <span class="icon">
                    <img src="./images/icon-ldfx.png" alt="" />
                </span>
                <span class="label"> 绿地分析 </span>
            </div>
        </div>
        <!-- 绘制属性编辑弹框 -->
        <div class="draw-edit-pane" v-if="isEdit">
            <edit-pane :value="isEditGraphic" @StyleChange="handelStyleChange" />
        </div>
        <transition
            enter-active-class="animate__animated animate__backInUp"
            leave-active-class="animate__animated animate__backOutDown"
        >
            <div class="child-option" v-if="mapAreaChildDataList && mapAreaChildDataList && !isAddDraw">
                <div class="child-option-main">
                    <div
                        class="child-item"
                        v-for="(item, index) in mapAreaChildDataList"
                        :key="index"
                        @click.stop="handelChildDataItemClick(item)"
                        :class="activeMapAreaChild && activeMapAreaChild.id === item.id ? 'active' : ''"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </transition>
        <!-- 新增绘制内容弹框 -->
        <transition
            enter-active-class="animate__animated animate__bounceIn"
            leave-active-class="animate__animated animate__bounceOut"
        >
            <div class="add-draw-dialog" v-if="addDrawDialog">
                <div class="dialog-title">
                    <div class="name">新增绘制内容</div>
                </div>
                <div class="dialog-main">
                    <div class="item">
                        <div class="label">名称</div>
                        <div class="content">
                            <input type="text" v-model="addDrawForm.name" placeholder="请输入名称" />
                        </div>
                    </div>
                    <div class="item">
                        <div class="label">备注</div>
                        <div class="content">
                            <input type="text" v-model="addDrawForm.remark" placeholder="请输入备注" />
                        </div>
                    </div>
                </div>
                <div class="dialog-footer">
                    <div class="btn" @click="handelCloseDraw">取消</div>
                    <div class="btn" @click="handelSubmitDraw">确认</div>
                </div>
            </div>
        </transition>
        <!-- 绿地占比计算弹框 -->
        <transition
            enter-active-class="animate__animated animate__bounceIn"
            leave-active-class="animate__animated animate__bounceOut"
        >
            <div class="green-space-analysis-dialog" v-if="greenSpaceAnalysisDialog">
                <div class="dialog-title">
                    <div class="name">绿地占比分析</div>
                </div>
                <div class="dialog-main">
                    <div class="choose-img">
                        <img :src="greenSpaceAnalysisImg" alt="" />
                    </div>
                    <div class="sys-result">绿地占比大约：{{ greenSpaceAnalysisVal }} %</div>
                </div>
                <div class="dialog-footer">
                    <div class="btn" @click="handelCloseGreenSpaceAnalysis">关闭</div>
                </div>
            </div>
        </transition>
		<!-- 绘制内容弹框 -->
		<transition
            enter-active-class="animate__animated animate__bounceIn"
            leave-active-class="animate__animated animate__bounceOut"
        >
            <div class="draw-face-dialog" v-if="drawFaceInfoDialog">
                <div class="dialog-title">
                    <div class="name">
						{{ activeMapAreaChild.name }}
					</div>
                </div>
                <div class="dialog-main">
                    <div class="desc">
						{{ activeMapAreaChild.remark}}
					</div>
                </div>
                <div class="dialog-footer">
                    <div class="btn" @click="handelCloseDrawFaceInfoDialog">关闭</div>
					<div class="btn" @click="handelDeleteDrawFaceInfo">删除</div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script setup>
import Map2d from '@/components/map2d/index'
import { ref, inject } from 'vue'
import EditPane from '@/components/editPane/index'
import domToImage from 'dom-to-image'
import { ElMessage, ElLoading } from 'element-plus'
import { getGreenPer } from '@/http/apis/index'
import {  forecastAreaDataList, forecastAreaDataListByChild, deleteForecastAreaDataListByChild , saveForecastAreaDataListByChild} from '@/http/apis/index' 
// gis地址
// const GIS_API = import.meta.env.VITE_API_GIS_API
const mars2d = inject('mars2d')
const L = inject('L')
// 地图配置
const mapConfig = {
    mapId: 'forecastPredictMap',
    center: {
        lng: 105.452271,
        lat: 35.507813
    },
    zoom: 7,
    basemaps: [
        // {
        //     type: 'wmts',
        //     name: '蓝色地图',
        //     url: GIS_API + '/geoserver/Ele_Map/gwc/service/wmts',
        //     layer: 'Ele_Map:HH_Basemap',
        //     format: 'image/png',
        //     tileMatrixSetID: 'EPSG:4326', // 对应wmts请求的 tilematrixSet
        //     tilematrixBefore: 'EPSG:4326:', // 对应wmts请求的 tilematrix
        //     crs: 'EPSG:4326',
        //     show: true
        // }
        {
            name: '高德卫星',
            type: 'group',
            show: true,
            layers: [
                { name: '底图', type: 'gaode', layer: 'img_d' }
                // { name: "注记", type: "gaode", layer: "img_z" }
            ]
        }
    ]
}
// 绘制子区域列表
const optionList = ref([
    {
        type: 'polygon',
        active: false,
        name: '面',
        style: {
            fill: true,
            fillColor: '#FBC21A',
            color: '#FBC21A',
            fillOpacity: 0.3,
            opacity: 0.3,
            outline: true,
            outlineWidth: 2,
            outlineColor: '#FBC21A',
            outlineOpacity: 1,
            clampToGround: true
        }
    },
    {
        type: 'rectangle',
        name: '矩形',
        active: false,
        style: {
            fill: true,
            fillColor: '#FBC21A',
            color: '#FBC21A',
            fillOpacity: 0.3,
            opacity: 0.3,
            outline: true,
            outlineWidth: 2,
            outlineColor: '#FBC21A',
            outlineOpacity: 1,
            clampToGround: true
        }
    },
    {
        type: 'circle',
        name: '圆',
        active: false,
        style: {
            fill: true,
            fillColor: '#FBC21A',
            color: '#FBC21A',
            fillOpacity: 0.3,
            opacity: 0.3,
            outline: true,
            outlineWidth: 2,
            outlineColor: '#FBC21A',
            outlineOpacity: 1,
            clampToGround: true
        }
    },
    {
        type: 'point',
        name: '点',
        active: false,
        style: {
            pixelSize: 8,
            color: '#000dfc'
        }
    },
    {
        type: 'label',
        name: '文字',
        active: false,
        style: {
            text: 'Mars2D平台',
            color: '#000dfc',
            font_size: 25,
            font_family: '楷体'
        }
    }
])
// 地图是否加载成功
const mapLoadSuccess = ref(false)
// 加载
let loadingInstance
// 地图对象
let map = null
// 地图数据图层组
let dataLayerGroup = null
// 子数据图层组
let childDataLayerGroup = null
// 绿地分析图层
let greenSpaceAnalysisLayer = null
// 绘制面积列表
let mapAreaDataList = ref([])
// 绘制面积列表下的子区域列表
let mapAreaChildDataList = ref([])
// 选中的绘制图层
let activeMapArea = ref({})
// 选中的绘制数据子区域
let activeMapAreaChild = ref({})
// 子数据绘制图层组
let AreaChildDrawLayer = null
// 是否新增绘制
let isAddDraw = ref(false)
// 绘制属性编辑
let isEdit = ref(false)
// 正在绘制的对象
let isEditGraphic = ref(null)
// 新增绘制内容弹框是否显示
let addDrawDialog = ref(false)
// 新增绘制内容表单
let addDrawForm = ref({
    name: '',
    json: '',
    remark: ''
})
// 绿地占比结果显示占比
let greenSpaceAnalysisDialog = ref(false)
// 绿地占比结果图片
let greenSpaceAnalysisImg = ref('')
// 绿地占比结果数据
let greenSpaceAnalysisVal = ref(0)
// 绘制结果弹框是否显示
let drawFaceInfoDialog = ref(false)
// 选中的绘制内容详情
let activeDrawFaceInfo = ref({})

/**
 * 地图加载成功
 */
const handelMapLoadSuccess = async params => {
    map = params.map
    mapLoadSuccess.value = params.status
    // 创建地图数据图层组
    createDataLayerGroup()
    featchMapAreaList()
}
/**
 * 查询绘制列表
 */
const featchMapAreaList = async () => {
	let res = await forecastAreaDataList();
	console.log('res-----', res)
	console.log('查询绘制区域列表')
	if (res && res.code === 0) { 
		mapAreaDataList.value = res.data
	} else {
		mapAreaDataList.value = []
	}
}
/**
 * 查询子区域列表
 */
const featchMapAreaByChildList = async () => {
    let res = await forecastAreaDataListByChild({
        forecastId: activeMapArea.value.id
	})
	console.log('res', res)
	if (res && res.code === 0) { 
		mapAreaChildDataList.value = res.data
	} else {
		mapAreaChildDataList.value = []
	}
} 
/**
 * 创建地图数据图层组
 */
const createDataLayerGroup = () => {
    // 创建数据图层组
    dataLayerGroup = new mars2d.layer.GroupLayer({
        id: 'forecast-predict-layer',
        name: '预测预报地图数据图层组'
    })
    // 创建子数据图层组
    childDataLayerGroup = new mars2d.layer.GroupLayer({
        id: 'forecast-predict-child-data-layer',
        name: '预测预报地图数据子图层组',
        zIndex: 10
    })
    // 创建子数据绘制图层组
    AreaChildDrawLayer = new mars2d.layer.GraphicLayer({
        id: Date.now(),
        name: '绘制图层',
        hasEdit: true,
        isAutoEditing: false // 绘制完成后是否自动激活编辑
    })
    map.addLayer(AreaChildDrawLayer)
    map.addLayer(dataLayerGroup)
    map.addLayer(childDataLayerGroup)
}
/**
 * 添加数据区域列表
 */
const handelDataClickItem = item => {
    // 先移除已有数据图层
    removeDataLayer()
    // 移除已有的子数据图层
    removeDataChild()
    // 选中的数据图层
    activeMapArea.value = item
    // 判断数据图层类型
	if (item.type == 'image') {
		const dataLayer = new mars2d.layer.ImageLayer({
			id: 'data-layer',
			name: item.boundaryName,
			url: item.boundaryUrl,
			rectangle: { xmin: item.minlng, xmax: item.maxlng, ymin: item.minlat, ymax: item.maxlat },
			flyTo: true
		})
		console.log('dataLayer', dataLayer)
		dataLayerGroup.addLayer(dataLayer)
		let corner1 = L.latLng(item.maxlat, item.maxlng)
		let corner2 = L.latLng(item.minlat, item.minlng)
		let bounds = L.latLngBounds(corner1, corner2)
		map.flyToBounds(bounds)
	} else if(item.type == 'draw'){ 
		const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
			id:'data-layer',
			name: item.name,
			data: item.forecastJson,
			attr: item,
			flyTo: true
		})
		dataLayerGroup.addLayer(geoJsonLayer);
	}
	// 查询子区域列表
	featchMapAreaByChildList()
}
/**
 * 移除数据区域
 */
const removeDataLayer = () => {
    dataLayerGroup &&
        dataLayerGroup.eachLayer(ele => {
            if (ele && ele.options && ele.options.id === 'data-layer') {
                dataLayerGroup.removeLayer(ele)
            } else {
                return
            }
        })
}
// 添加子数据区域
const handelChildDataItemClick = item => {
    activeMapAreaChild.value = item
    removeDataChild()
    const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
        name: '子数据',
		data: item.drawJson,
		attr:item
    })
	childDataLayerGroup.addLayer(geoJsonLayer)
	geoJsonLayer.on(mars2d.EventType.click, function (e) {
		// 弹框显示
		drawFaceInfoDialog.value = true;
		// 绘制内容赋值
		activeDrawFaceInfo.value = e.target.options.attr;
    })
}
/**
 * 移除子区域数据
 */
const removeDataChild = () => {
    childDataLayerGroup && childDataLayerGroup.clearLayers()
}
// 开始绘制子区域
const handelStartDrawChild = () => {
    activeMapAreaChild.value = {}
    isAddDraw.value = !isAddDraw.value
    // 如果此时是绘制模式，就将子数据先隐藏掉
    removeDataChild()
    removeChildDatDraw()
}
// 开始子数据绘制
const startChildDataDraw = item => {
    optionList.value.forEach(ele => {
        ele.active = false
    })
    item.active = true
    AreaChildDrawLayer && AreaChildDrawLayer.startDraw(item)
    // 绘制完成
    AreaChildDrawLayer.on(mars2d.EventType.drawCreated, function (e) {
        item.active = false
        let geojsonObject = AreaChildDrawLayer.toGeoJSON()
        if (geojsonObject == null) {
            return null
        }
        geojsonObject = mars2d.Util.clone(geojsonObject)
        console.log('绘制后的内容', JSON.stringify(geojsonObject))
        console.table(geojsonObject)
        console.log('e', e)
        isEditGraphic.value = e.graphic
        isEdit.value = true
    })
    //开始编辑
    AreaChildDrawLayer.on(mars2d.EventType.editStart, function (e) {
        isEditGraphic.value = e.graphic
        isEdit.value = true
    })
    // 编辑完成
    AreaChildDrawLayer.on(mars2d.EventType.editStop, function () {
        isEditGraphic.value = null
        isEdit.value = false
    })
}
// 移除子数据绘制内容
const removeChildDatDraw = () => {
    AreaChildDrawLayer && AreaChildDrawLayer.clear()
}
// 确认子数据绘制
const coformChildDatDraw = () => {
    let geojsonObject = AreaChildDrawLayer.toGeoJSON()
    if (geojsonObject == null) {
        return null
    }
    geojsonObject = mars2d.Util.clone(geojsonObject)
    isEdit.value = false
    isEditGraphic.value = null
    addDrawDialog.value = true
	addDrawForm.value.json = geojsonObject
}
// 子数据绘制属性编辑
const handelStyleChange = value => {
    isEditGraphic.value && isEditGraphic.value.setStyle(value)
}
// 子数据取消绘制
const handelCloseDraw = () => {
    addDrawDialog.value = false
    isEdit.value = false
    isEditGraphic.value = null
    addDrawForm.value.json = ''
    addDrawForm.value.name = ''
    addDrawForm.value.remark = ''
    handelStartDrawChild()
}
// 确认绘制
const handelSubmitDraw = async () => {
    if (addDrawForm.value.json && addDrawForm.value.name) {
        addDrawDialog.value = false
        handelStartDrawChild()
		let res = await saveForecastAreaDataListByChild({
			forecastId: activeMapArea.value.id,
			drawJson: JSON.stringify(addDrawForm.value.json),
			name: addDrawForm.value.name,
			remark: addDrawForm.value.remark
		})
		if (res && res.code == 0) {
			ElMessage({
				message: '新增成功！',
				type: 'success'
			})
		} else { 
			ElMessage({
				message: '新增失败！',
				type: 'error'
			})
		}
		featchMapAreaByChildList();
    } else {
        ElMessage('请填写名称和绘制数据')
    }
}
// 绿地框选
const handelSelectGreenSpaceAnalysis = () => {
    handelClearGreenSpaceAnalysis()
    greenSpaceAnalysisLayer = new mars2d.layer.GraphicLayer({
        name: '绿地分析'
    })
    map.addLayer(greenSpaceAnalysisLayer)
    greenSpaceAnalysisLayer.startDraw({
        type: 'rectangle',
        name: '矩形',
        style: {
            fill: false,
            outline: true,
            outlineWidth: 1,
            outlineColor: '#FBC21A',
            outlineOpacity: 1,
            clampToGround: true
        }
    })
    // 绘制完成
    greenSpaceAnalysisLayer.on(mars2d.EventType.drawCreated, e => {
        let topLeft = e.graphic._latlngs[0][1]
        let bottomRight = e.graphic._latlngs[0][3]
        // 根据坐标拿到两点的像素坐标，用于后面裁剪
        // 方法是leaflet官网的
        let corner1 = map.latLngToContainerPoint(topLeft)
        let corner2 = map.latLngToContainerPoint(bottomRight)
        let node = document.getElementById(mapConfig.mapId)
        loadingInstance = ElLoading.service({
            lock: true,
            text: '分析中...',
            background: 'rgba(0, 0, 0, 0.7)'
        })
        domToImage
            .toPng(node)
            .then(function (dataUrl) {
                secondCut(corner1, corner2, dataUrl, res => {
                    greenSpaceAnalysisImg.value = res.handleSrc
                    greenSpaceAnalysisVal.value = res.value
                    greenSpaceAnalysisDialog.value = true
                    loadingInstance.close()
                })
            })
            .catch(function (error) {
                loadingInstance.close()
                console.error('oops, something went wrong!', error)
                ElMessage({
                    message: '分析失败！',
                    type: 'error'
                })
            })
    })
}
// 删除绿地分析框选图层
const handelClearGreenSpaceAnalysis = () => {
    if (greenSpaceAnalysisLayer) {
        map.removeLayer(greenSpaceAnalysisLayer)
    }
}
const secondCut = async (corner1, corner2, dataUrl, callback) => {
    //this.handleSrc是存放最终截图效果的位置
    let handleSrc = await handleImg({
        src: dataUrl,
        rect: {
            x: corner1.x, // 左上角横坐标
            y: corner1.y, // 左上角纵坐标
            width: corner2.x - corner1.x, // 方格宽度
            height: corner2.y - corner1.y // 方格高度
        }
	})
	let res = await getGreenPer({
		images: dataUrl
	})
	console.log('res----', res)
	let value
	if (res) {
		value = res.data
	} else {
		value = null
	}
	callback &&
		callback({
			handleSrc,
			value: value
		})
    
}
//处理img
const handleImg = opts => {
    return new Promise((resolve, reject) => {
        const { src, rect } = opts
        if (!src || !rect) {
            reject(new Error('opts params Error!'))
        }
        const img = new Image()
        img.src = src
        img.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            const { x, y, width, height } = rect
            canvas.width = width
            canvas.height = height
            ctx.drawImage(this, x, y, width, height, 0, 0, width, height)
            const url = canvas.toDataURL('image/png')
            console.log('url', url)
            resolve(url)
        }
        img.onerror = function (err) {
            reject(err)
        }
    })
}
// 关闭绿地分析
const handelCloseGreenSpaceAnalysis = () => {
    handelClearGreenSpaceAnalysis()
    greenSpaceAnalysisDialog.value = false
}
// 关闭子区域绘制详情
const handelCloseDrawFaceInfoDialog = () => { 
	// 绘制结果弹框是否显示
	drawFaceInfoDialog.value = false;
	// 选中的绘制内容详情
	activeDrawFaceInfo.value = {}
}
// 删除绘制的子区域
const handelDeleteDrawFaceInfo = async () => {
	let res = await deleteForecastAreaDataListByChild([activeDrawFaceInfo.value.id])
	console.log('res', res)
	if (res && res.code === 0) {
		ElMessage({
			message: '删除成功！',
			type: 'success'
		})
		activeDrawFaceInfo.value = {};
		removeDataChild();
		featchMapAreaByChildList();
	} else { 
		ElMessage({
			message: '删除失败！',
			type: 'error'
		})
	}
	drawFaceInfoDialog.value = false;
}
</script>
<style lang="scss" scoped>
.forecast-predict {
    @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    position: relative;
    .map-box {
        @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
        @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    }
    .left-container {
        position: absolute;
        left: 10px;
        top: 80px;
        @include box-flex(
            $width: 350px,
            $height: calc(100% - 100px),
            $direction: column,
            $justify: space-between,
            $align: center
        );
        z-index: 1000;
        > .card-container {
            @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
            .card-content {
                @include box-flex(
                    $width: 100%,
                    $height: auto,
                    $direction: column,
                    $justify: flex-start,
                    $align: center,
                    $flex-1: 1
                );
                overflow-y: auto;
                padding: 20px;
                .card-item {
                    @include box-flex(
                        $width: 100%,
                        $height: 40px,
                        $direction: row,
                        $justify: flex-start,
                        $align: center
                    );
                    background: url('@/views/liveMonitor/images/bg-menu.png') no-repeat;
                    background-size: 100% 100%;
                    margin-bottom: 20px;
                    padding: 0 20px;
                    transition: all 0.3s;
                    cursor: pointer;
                    .name {
                        margin-left: 10px;
                        cursor: pointer;
                    }
                    &:hover {
                        background: url('@/views/liveMonitor/images/bg-menu-d.png') no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .card-item.active {
                    background: url('@/views/liveMonitor/images/bg-menu-d.png') no-repeat;
                    background-size: 100% 100%;
                }
                .no-data {
                    @include box-flex(
                        $width: 100%,
                        $height: 100%,
                        $direction: column,
                        $justify: center,
                        $align: center
                    );
                }
            }
        }
    }
    .option-container {
        position: absolute;
        right: 10px;
        top: 80px;
        z-index: 9999;
        .option-button {
            position: relative;
            @include box-flex($width: auto, $height: auto, $direction: column, $justify: center, $align: center);
            background: rgba($color: #02172f, $alpha: 50%);
            padding: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
            .icon {
                @include box-flex($width: 30px, $height: 30px, $direction: column, $justify: center, $align: center);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .label {
                color: #fff;
                margin-top: 10px;
            }
            &:hover {
                background: rgba($color: #d9dd04, $alpha: 50%);
            }
            .option-group {
                position: absolute;
                right: 110%;
                top: 0;
                @include box-flex(
                    $width: 300px,
                    $height: auto,
                    $direction: row,
                    $justify: flex-start,
                    $flex-wrap: wrap,
                    $align: center
                );
                padding: 10px;
                background: rgba($color: #02172f, $alpha: 50%);
                .option-item {
                    @include box_flex($width: 100px, $height: auto, $direction: row, $justify: center, $align: center);
                    border: solid 1px #4ab0f0;
                    margin: 5px;
                    padding: 5px 20px;
                    margin-right: 20px;
                    cursor: pointer;
                    background: #47b7e6;
                    color: #fff;
                    transition: all 0.3s;

                    &:hover {
                        background: #fbd76d;
                        border: solid 1px #fb9331;
                        color: #fff;
                    }
                }
                .option-item.active {
                    background: #fbd76d;
                    border: solid 1px #fb9331;
                    color: #fff;
                }
            }
        }
        .option-button.active {
            background: rgba($color: #d9dd04, $alpha: 50%);
        }
    }
    .add-draw-dialog {
        @include box-flex($width: 20vw, $height: auto, $direction: column, $justify: center, $align: center);
        position: absolute;
        z-index: 1000;
        background: url('@/views/dataOverview/images/bg-dialog.png') no-repeat;
        background-size: 100% 100%;
        padding: 20px 20px 0 20px;
        .dialog-title {
            @include box-flex($width: 100%, $height: 40px, $direction: row, $justify: space-between, $align: center);
            padding: 0 20px;
            background: #0f2b3f;
        }
        .dialog-main {
            @include box-flex(
                $width: 100%,
                $height: calc(100% - 40px),
                $direction: column,
                $justify: center,
                $align: center
            );
            padding: 20px 20px 0 20px;
            .item {
                @include box-flex($width: 100%, $height: auto, $direction: row, $justify: flex-start, $align: center);
                margin-bottom: 20px;
                .content {
                    margin-left: 20px;
                    input {
                        padding: 10px 30px;
                        background: #0f2b3f;
                        color: #fff;
                        border: none;
                        outline: none;
                    }
                }
            }
        }
        .dialog-footer {
            @include box-flex($width: 100%, $height: auto, $direction: row, $justify: flex-end, $align: center);
            .btn {
                padding: 10px 20px;
                margin: 10px;
                border: solid 1px #0f2b3f;
                cursor: pointer;
                transition: all 0.3s;
                &:hover {
                    background: #47b7e6;
                }
            }
        }
    }
    .child-option {
        position: absolute;
        bottom: 60px;
        width: calc(100vw - 400px);
        left: 380px;
        height: auto;
        z-index: 1000;
        .child-option-main {
            @include box-flex($width: auto, $height: auto, $direction: row, $justify: flex-start, $align: center);
            .child-item {
                @include box_flex($width: auto, $height: auto, $direction: row, $justify: center, $align: center);
                border: solid 1px #4ab0f0;
                padding: 5px 20px;
                margin-right: 20px;
                cursor: pointer;
                background: #47b7e6;
                color: #fff;
                transition: all 0.3s;

                &:hover {
                    background: #fbd76d;
                    border: solid 1px #fb9331;
                    color: #fff;
                }
            }
            .child-item.active {
                background: #fbd76d;
                border: solid 1px #fb9331;
                color: #fff;
            }
        }
    }
    .draw-edit-pane {
        @include box-flex($width: auto, $height: auto, $direction: column, $justify: center, $align: center);
        position: absolute;
        top: 80px;
        z-index: 1000;
        right: 410px;
        background: rgba($color: #02172f, $alpha: 50%);
    }
    .green-space-analysis-dialog,
	.draw-face-dialog {
        @include box-flex($width: 30vw, $height: auto, $direction: column, $justify: center, $align: center);
        position: absolute;
        z-index: 1000;
        background: url('@/views/dataOverview/images/bg-dialog.png') no-repeat;
        background-size: 100% 100%;
        padding: 20px 20px 0 20px;
        .dialog-title {
            @include box-flex($width: 100%, $height: 40px, $direction: row, $justify: space-between, $align: center);
            padding: 0 20px;
            background: #0f2b3f;
        }
        .dialog-main {
            @include box-flex(
                $width: 100%,
                $height: calc(100% - 40px),
                $direction: column,
                $justify: center,
                $align: center
            );
            padding: 20px 20px 0 20px;
            .choose-img {
                width: 100%;
                height: auto;
                img {
                    width: 100%;
                    height: auto;
                }
            }
            .sys-result {
                padding: 5px 0;
            }
        }
        .dialog-footer {
            @include box-flex($width: 100%, $height: auto, $direction: row, $justify: flex-end, $align: center);
            .btn {
                padding: 5px 20px;
                margin: 10px;
                border: solid 1px #0f2b3f;
                cursor: pointer;
                transition: all 0.3s;
                &:hover {
                    background: #47b7e6;
                }
            }
        }
    }
	.draw-face-dialog{
        .dialog-main {
            @include box-flex(
                $width: 100%,
                $height: calc(100% - 40px),
                $direction: column,
                $justify: center,
                $align: center
            );
            padding: 20px 20px 0 20px;
			.desc{
				@include box-flex(
					$width: 100%,
					$height: auto,
					$direction: row,
					$justify: flex-start,
					$align: flex-start
				);
			}
        }
	}
}
</style>
